<template>
	<view>
		<view class="container" v-if="data_base != null">
		  <view id="mainContent">
		    <view class="header">
		      <text class="header-title">抢先发现</text>
		      <text class="header-subtitle">全球优质新项目</text>
		      <view class="stats-card">
		        <view class="stats">
		          <view class="stat-item">
		            <text class="stat-number">{{data_base.visitnum}}</text>
		            <text class="stat-label">浏览人次</text>
		          </view>
		          <view class="stat-item">
		            <text class="stat-number">{{data_base.joinmoney}}</text>
		            <text class="stat-label">参与金额</text>
		          </view>
		          <view class="stat-item">
		            <text class="stat-number">{{count}}</text>
		            <text class="stat-label">项目数</text>
		          </view>
		        </view>
		      </view>
		      <view class="what-is" @tap="showAboutJumpstart">什么是 Jumpstart?</view>
		    </view>
		
		    <view class="section-header">
		      <text class="section-title">推荐项目</text>
		      <!--<text class="my-rewards-button" @tap="showMyRewards">我的奖励</text>-->
		    </view>
		
		    <view v-for="(project, index) in data" :key="index" class="project-card">
				<view :data-value="'/pages/fcc/sending/detail/detail?id='+project.id" @tap="url_event">
				  <view class="project-card-border"></view>
				  <view class="project-card-bg"></view>
				  <view class="project-content">
					<view class="project-header">
					  <view v-if="project.images != ''" class="project-logo"><image :src="project.images" mode="aspectFit" class=""></image></view>
					  <view v-else class="project-logo">{{ project.coin_name || 'POC' }}</view>
					  <view class="project-title">
						<text class="project-name">{{ project.coin_name }}</text>
						<text class="project-subtitle">{{ project.title }}</text>
					  </view>
					</view>
					<view class="project-tags">
					  <text v-for="(tag, tagIndex) in project.simple_desc_arr" :key="tagIndex" :class="'project-tag label-'+tagIndex">{{ tag }}</text>
					</view>
					<view class="project-metrics">
					  <view class="metric-group">
						<text class="metric-label">{{ project.zhangfu_title }}</text>
						<text class="metric-value positive">{{ project.history_shouyi }}</text>
					  </view>
					  <view class="metric-group">
						<text class="metric-label">历史总量</text>
						<text class="metric-value token">{{ project.title_color }}</text>
					  </view>
					</view>
				  </view>
			  </view>
		    </view>
		
		    <view class="see-more">
		      <button class="see-more-btn" @tap="showAllProjects">全部项目</button>
		    </view>
		
		    <view class="features">
		      <text class="features-title">{{data_base.welcome_title}}</text>
		      <text class="features-subtitle">{{data_base.welcome_desc}}</text>
		      <view v-for="(feature, index) in features" :key="index" class="feature-item">
		        <text class="feature-icon">{{ feature.icon }}</text>
		        <view>
		          <text class="feature-text">{{ feature.title }}</text>
		          <text class="feature-description">{{ feature.description }}</text>
		        </view>
		      </view>
		      <button class="cta-button" @tap="showApplicationForm">立即申请</button>
		    </view>
		  </view>
		  
			<component-popup :propShow="showAllProjectsView" @onclose="showMainContent">
				<view class="all-projects-box">
					<view id="allProjectsView">
					  <view class="all-projects-header">
					    <text class="all-projects-title">全部项目</text>
					    <button class="back-to-main" @tap="showMainContent">返回主页</button>
					  </view>
					  <view id="allProjectsList" style="clear:both;">
							<view v-for="(project, index) in data_all" :key="index" class="project-card">
								<view :data-value="'/pages/fcc/sending/detail/detail?id='+project.id" @tap="url_event">
							  <view class="project-card-border"></view>
							  <view class="project-card-bg"></view>
							  <view class="project-content">
							    <view class="project-header">
							      <view v-if="project.images != ''" class="project-logo"><image :src="project.images" mode="aspectFit" class=""></image></view>
								  <view v-else class="project-logo">{{ project.coin_name || 'POC' }}</view>
							      <view class="project-title">
							        <text class="project-name">{{ project.coin_name }}</text>
							        <text class="project-subtitle">{{ project.title }}</text>
							      </view>
							    </view>
							    <view class="project-tags">
							      <text v-for="(tag, tagIndex) in project.simple_desc_arr" :key="tagIndex" :class="'project-tag label-'+tagIndex">{{ tag }}</text>
							    </view>
							    <view class="project-metrics">
							      <view class="metric-group">
							        <text class="metric-label">{{ project.zhangfu_title }}</text>
							        <text class="metric-value positive">{{ project.history_shouyi }}</text>
							      </view>
							      <view class="metric-group">
							        <text class="metric-label">历史总量</text>
							        <text class="metric-value token">{{ project.title_color }}</text>
							      </view>
							    </view>
							  </view>
							  </view>
							</view>
					  </view>
					</view>
				</view>
			</component-popup>
		  
			<component-popup :propShow="showAboutJumpstartView" @onclose="showMainContent">
				<view>
					<view id="aboutJumpstart" class="about-jumpstart">
					  <button class="back-button" @tap="showMainContent">返回</button>
					  <text class="about-title">关于 Jumpstart</text>
					  <view v-for="(faq, index) in faqs" :key="index" class="faq-item">
					    <view class="faq-question" @tap="toggleFAQ(index)">
					      <text>{{ faq.question }}</text>
					      <text class="faq-toggle">{{ faq.isOpen ? '▲' : '▼' }}</text>
					    </view>
					    <view v-if="faq.isOpen" class="faq-answer">
					      <text v-for="(paragraph, pIndex) in faq.answer" :key="pIndex">{{ paragraph }}</text>
					    </view>
					  </view>
					  <text class="section-title">产品优势</text>
					  <view class="advantages">
					    <text v-for="(advantage, index) in advantages" :key="index" class="advantage-item">{{ advantage }}</text>
					  </view>
					  <text class="section-title">流程</text>
					  <view class="process">
					    <text v-for="(step, index) in process" :key="index" class="process-item">{{step}}</text>
					  </view>
					  <text class="section-title">常见问题</text>
					  <view v-for="(faq, index2) in faqs2" :key="index2" class="faq-item">
					    <view class="faq-question" @tap="toggleFAQ2(index2)">
					      <text>{{ faq.question }}</text>
					      <text class="faq-toggle">{{ faq.isOpen ? '▲' : '▼' }}</text>
					    </view>
					    <view v-if="faq.isOpen" class="faq-answer">
					      <text v-for="(paragraph, pIndex) in faq.answer" :key="pIndex">{{ paragraph }}</text>
					    </view>
					  </view>
					</view>
				</view>
			</component-popup>

		  <view id="applicationForm" v-if="showApplicationFormView">
		    <view class="form-header">
		      <button class="back-arrow" @tap="hideApplicationForm">←</button>
		      <text class="form-title">Jumpstart 项目申请表</text>
		    </view>
		    <form @submit="submitApplication">
		      <view v-for="(field, index) in formFields" :key="index" class="form-group">
		        <label class="form-label">
		          <text v-if="field.required" class="required">*</text>
		          {{ field.label }}
		        </label>
		        <input v-if="field.type !== 'textarea'" :name="field.name" :type="field.type" class="form-input" :placeholder="field.placeholder" required>
		        <textarea v-else class="form-input form-textarea" :name="field.name" :placeholder="field.placeholder" required></textarea>
		      </view>
		      <button form-type="submit" class="form-submit" :loading="form_submit_loading" :disabled="form_submit_loading">提交</button>
		    </form>
		  </view>
		</view>
		<view v-else>
			<!-- 提示信息 -->
		    <component-no-data :propStatus="data_list_loding_status" :propMsg="data_list_loding_msg"></component-no-data>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	import componentNoData from '@/components/no-data/no-data';
	import componentPopup from "@/components/popup/popup";
	
	var static_url_mini = app.globalData.get_static_url('mini');
	export default {
	  data() {
			return {
				static_url_mini: static_url_mini,
				data_bottom_line_status: false,
				data_list_loding_status: 1,
				data_list_loding_msg: '',
				data: [],
				data_all: [],
				data_is_loading: 0,
				data_total: 0,
				data_page_total: 0,
				data_page: 1,
				data_base: null,
				count: 0,
				form_submit_loading: false,
				showAllProjectsView: false,
				showAboutJumpstartView: false,
				showApplicationFormView: false,
				features: [
				  { icon: '✨', title: '强曝光', description: '百万用户曝光' },
				  { icon: '🌊', title: '流动性', description: '世界级流动性' },
				  { icon: '⚖️', title: '公平性', description: '公平合理分配' }
				],
				faqs: [],
				faqs2: [],
				advantages: [],
				process: [],
				formFields: [
				  { label: '姓名', name: 'name', type: 'text', placeholder: '请输入您的姓名', required: true },
				  { label: '邮箱', name: 'email', type: 'email', placeholder: '请输入邮箱地址', required: true },
				  { label: '公司名称', name: 'company', type: 'text', placeholder: '请输入您的公司名称', required: true },
				  { label: '您的职位', name: 'zhiwei', type: 'text', placeholder: '请输入您的职位', required: true },
				  { label: '请提供您的项目的一句话介绍', name: 'miaoshu', type: 'textarea', placeholder: '请在这里填写', required: true }
				]
			}
		},
		components: {
		    componentNoData,
			componentPopup
		},
		onLoad(params) {
			// 数据加载
			this.get_data_list();
		},
		onShow() {
			app.globalData.page_event_onshow_handle();
		},
		// 下拉刷新
		onPullDownRefresh() {
		    /*this.setData({
		        data_page: 1,
		    });
		    this.get_data_list(1);*/
		},
		methods: {
			get_data_list(is_mandatory) {
			    // 分页是否还有数据
			    if ((is_mandatory || 0) == 0) {
			        if (this.data_bottom_line_status == true) {
			            uni.stopPullDownRefresh();
			            return false;
			        }
			    }
			    // 是否加载中
			    if (this.data_is_loading == 1) {
			        return false;
			    }
			    this.setData({
			        data_is_loading: 1,
			        data_list_loding_status: 1,
			    });
			    // 加载loding
			    uni.showLoading({
			        title: this.$t('common.loading_in_text'),
			    });
			    uni.request({
			        url: app.globalData.get_request_url('index', 'index', 'pisending'),
			        method: 'POST',
			        success: (res) => {console.log(res.data);
			            uni.hideLoading();
			            uni.stopPullDownRefresh();
			            if (res.data.code == 0) {
			                var data = res.data.data;
			                if (data.data.length > 0) {
			                    if (this.data_page <= 1) {
			                        var temp_data_list = data.data;
			                    } else {
			                        var temp_data_list = this.data_list || [];
			                        var temp_data = data.data;
			                        for (var i in temp_data) {
			                            temp_data_list.push(temp_data[i]);
			                        }
			                    }
								var udp = {
									data_base: data.base || null, 
			                        data: temp_data_list,
									data_all: temp_data_list,
			                        data_total: data.total,
			                        data_page_total: data.page_total,
			                        data_list_loding_status: 3,
			                        data_list_loding_msg: '',
			                        data_page: this.data_page + 1,
			                        data_is_loading: 0,
									count: temp_data_list.length || 0,
			                    };
								if((data.base || null) != null)
								{
									udp['faqs'] = data.base.jumpstart_faq_arr;
									udp['advantages'] = data.base.jumpstart_youshi;
									udp['process'] = data.base.jumpstart_liucheng;
									udp['faqs2'] = data.base.jumpstart_faq2_arr;
								}
			                    this.setData(udp);
			
			                    // 是否还有数据
			                    this.setData({
			                        data_bottom_line_status: this.data_page > 1 && this.data_page > this.data_page_total,
			                    });
			                } else {
			                    this.setData({
			                        data_list_loding_status: 0,
			                        data_total: 0,
			                        data_is_loading: 0,
			                    });
			                    if (this.data_page <= 1) {
			                        this.setData({
			                            data: [],
			                            data_bottom_line_status: false,
			                        });
			                    }
			                }
			            } else {
			                this.setData({
			                    data_list_loding_status: 0,
			                    data_list_loding_msg: res.data.msg,
			                    data_is_loading: 0,
			                });
			                app.globalData.showToast(res.data.msg);
			            }
			        },
			        fail: () => {
			            uni.hideLoading();
			            uni.stopPullDownRefresh();
			            this.setData({
			                data_list_loding_status: 2,
			                data_list_loding_msg: this.$t('common.internet_error_tips'),
			                data_is_loading: 0,
			            });
			            app.globalData.showToast(this.$t('common.internet_error_tips'));
			        },
			    });
			},
			// url事件
			url_event(e) {
			    app.globalData.url_event(e);
			},
			showAboutJumpstart() {
			  this.showAboutJumpstartView = true
			  this.showAllProjectsView = false
			  this.showApplicationFormView = false
			},
			showMainContent() {
			  this.showAboutJumpstartView = false
			  this.showAllProjectsView = false
			  this.showApplicationFormView = false
			},
			showAllProjects() {
			  this.showAllProjectsView = true
			  this.showAboutJumpstartView = false
			  this.showApplicationFormView = false
			},
			showApplicationForm() {
			  this.showApplicationFormView = true
			  this.showAboutJumpstartView = false
			  this.showAllProjectsView = false
			},
			hideApplicationForm() {
			  this.showApplicationFormView = false
			},
			toggleFAQ(index) {
			  this.$set(this.faqs[index], 'isOpen', !this.faqs[index].isOpen)
			},
			toggleFAQ2(index) {
			  this.$set(this.faqs2[index], 'isOpen', !this.faqs2[index].isOpen)
			},
			submitApplication(event) {
			  // Handle form submission here
			  var form_data = event.detail.value;
			  console.log(form_data);
			  // 数据验证
			  var validation = [
			      { fields: 'name', msg: '姓名不能为空' },
				  { fields: 'email', msg: '邮箱不能为空' },
				  { fields: 'company', msg: '公司名称不能为空' },
				  { fields: 'zhiwei', msg: '职位不能为空' },
				  { fields: 'miaoshu', msg: '介绍不能为空' },
			  ];
			  if (app.globalData.fields_check(form_data, validation)) {
			      uni.showLoading({
			          title: this.$t('buy.buy.r79t77'),
			      });
			      this.setData({
			          form_submit_loading: true,
			      });
			  	
			      // 网络请求
			      uni.request({
			          url: app.globalData.get_request_url('jumpsave', 'index', 'pisending'),
			          method: 'POST',
			          data: form_data,
			          dataType: 'json',
			          success: (res) => {console.log(res.data);
			              uni.hideLoading();
			              if (res.data.code == 0) {
							app.globalData.showToast(res.data.msg, 'success');
							this.hideApplicationForm();
			              } else {
			                  this.setData({
			                      form_submit_loading: false,
			                  });
			                  app.globalData.showToast(res.data.msg);
			              }
			          },
			          fail: () => {
			              uni.hideLoading();
			              this.setData({
			                  form_submit_loading: false,
			              });
			              app.globalData.showToast(this.$t('common.internet_error_tips'));
			          },
			      });
			  }
			},
			showMyRewards() {
			  // Implement the logic to show user rewards
			  uni.showToast({
			    title: '我的奖励功能即将上线',
			    icon: 'none'
			  })
			}
		}
	}
</script>

<style scoped>
@import './index.css';
</style>